<template>
    <div id="region-year">
        <!-- 编辑区域 年限 -->
        <div class="tages-content">
            <div class="top-bg">
                <div class="header">
                        <div class="left" @click="diffBack" ><img src="@/assets/img/public/leftarrow.png" alt=""></div>
                        <div class="title">{{title}}</div>
                        <div class="right" @click="confirmEdit">完成</div>
                    </div>
            </div>
            <div class="reset-wrapper">
                <div class="reset-content">
                    <div v-if="infons=='fromName'">
                        <div class="area-input bgwrite"> <input v-model="inputContent" :placeholder="inputContentP" ref="contentRef" @click="focusContent"></div>
                    </div>
                    <div v-else>
                        <div class="area-input bgwrite"> <input v-model="inputContent" type="text" @click="editDate" :placeholder="inputContentP" readonly></div>
                        <van-popup v-model="showTimePicker" position="bottom" :overlay="true">  
                            <!-- <van-picker
                                show-toolbar
                                title="编辑年限"
                                :columns="ListYear"
                                @cancel="cancelYear"
                                @confirm="confirmYear"
                                /> -->
                                <van-datetime-picker
                                v-model="timePicker"
                                type="date"
                                title="请选择日期"
                                :max-date="maxDate"
                                @confirm="confirmDate"
                                @cancel="cancelDate"
                                />
                        </van-popup>
                    </div>
                </div>
            </div>
      </div>
    </div>
</template>
<script>
import {getuserUid} from '@/utils/auth.js'
import { mapState, mapMutations } from "vuex";
import { noEmoji } from "@/utils/noEmoji";
export default {
  components: {
  },
  data() {
    return {
      title: '',
      fromW: '',
      showPop: false,
      areaP: "请输入地址",
      inputContent: "",
      inputContent: "",
      inputContent: "",
      inputContent:"",
      inputContentP: "",
      workHistorys: {
          companyName: "",
          beginDate: "",
          endDate: "",
          number:"",
          uid: ""
      },
      showTimePicker: false,
      infons: "",
      tages: "",
      maxDate: new Date(),
      timePicker: new Date(),
      emoji: false,
      dateFalse: "0" // 校验 日期选择是否大于当前日期 0 初始化 1 正常 2 大于不正常
    }
  },
  computed: {
      ...mapState({
          newExperience: state => state.newExperience,
          oldExperience: state => state.oldExperience,
          allResume: state => state.allResume
      })
  },
  created() {
      this.fromW = this.$route.params.fromW
      this.infons= this.$route.params.info
      this.tages = this.$route.params.tages
      if (this.fromW == "fromN"){
          this.workHistorys.number = this.allResume.workHistorys.length+1
          this.title =  "添加经验"
          if(this.infons == "fromName") {
              if (this.newExperience.companyName == ""){
                  this.inputContentP = "请输入公司名称"
              } else if (this.newExperience.companyName != "") {
                  this.inputContent = this.this.newExperience.companyName
              }
          } else if (this.infons == "fromStartTime") {
              if (this.newExperience.beginDate == ""){
                  this.inputContentP = "请选择开始日期"
              } else if (this.newExperience.beginDate != "") {
                  this.inputContent = this.newExperience.beginDate
              }
              this.showTimePicker = false
          } else if (this.infons == "fromEndTime"){
              if (this.newExperience.endDate == "") {
                  this.inputContentP = "请选择结束日期"
              } else if (this.newExperience.endDate != "") {
                   this.inputContent = this.newExperience.endDate
              }
              this.showTimePicker = false
          }
      } else if (this.fromW == "fromO") {
           this.title =  "编辑经验"
           if(this.infons == "fromName") {
                this.inputContent = this.oldExperience.companyName
            } else if (this.infons == "fromStartTime") {
                this.inputContent = this.onlyDate(this.oldExperience.beginDate)
                this.showTimePicker = false
            } else if (this.infons == "fromEndTime"){
                this.inputContent = this.onlyDate(this.oldExperience.endDate)
                this.showTimePicker = false
            }
      }
  },
  methods: {
      // 名称focus
      focusContent() {
          this.$refs.contentRef.focus()
      },
      diffBack() {
          if (this.fromW == "fromN") {
              this.$router.push('/performance/newExperiences')
          } else if (this.fromW == "fromO") {
             this.$router.push('/performance/myExperiences') 
          }
          
      },
      confirmEdit() {
         
          // 调取接口 返回 编辑简历页面 需要判断是否为空
          if (this.fromW == "fromN") {
            if (this.infons == "fromName") {
                if (!this.inputContent || /^\s*$/.test(this.inputContent)){
                    this.$toast({
                        message: "公司名称不能为空哦"
                    })
                    this.inputContent = ""
                    this.inputContentP = "请输入公司名称"
                } else if (this.inputContent != ""){
                     //  调取接口 添加简历经验（充公需要重新设置newExper） + 跳转 
                     for (let i of this.inputContent) {
                            if (noEmoji(i)) {
                                this.emoji = true;
                                break;
                            } 
                        }
                        if (this.emoji) {
                            this.emoji=false
                            this.inputContent = ""
                            this.$toast('内容只限数字，中文，英文哦~~')
                            return false
                        } else {
                            this.workHistorys.companyName = this.inputContent
                            this.addResume()
                        }
                }
            } else if (this.infons == "fromStartTime") {
                if (this.inputContent == "") {
                    this.$toast({
                        message: "开始日期不能为空哦"
                    })
                } else if(this.inputContent != "") {
                    this.checkEndDate(this.inputContent)
                }
            } else if (this.infons == "fromEndTime") {
                if (this.inputContent == "") {
                    this.$toast({
                        message: "结束日期不能为空哦"
                    })
                } else if(this.inputContent != "") {
                    this.checkEndDate(this.inputContent)
                }
            }
          } else if (this.fromW == "fromO") {
             
            if (this.infons == "fromName") {
                if (!this.inputContent || /^\s*$/.test(this.inputContent)){
                    this.$toast({
                        message: "公司名称不能为空哦"
                    })
                    this.inputContent = ""
                    this.inputContentP = "请输入公司名称"
                } else if (this.inputContent != ""){
                        //  调取接口 添加简历经验（充公需要重新设置newExper） + 跳转 
                        for (let i of this.inputContent) {
                            if (noEmoji(i)) {
                                this.emoji = true;
                                break;
                            } 
                        }
                        if (this.emoji) {
                            this.emoji=false
                            this.inputContent = ""
                            this.$toast('内容只限数字，中文，英文哦~~')
                            return false
                        } else {
                            this.workHistorys.companyName = this.inputContent
                            this.addResume()
                        }
                }
            } else {
                 if (this.infons == "fromStartTime") {
                      
                    if (this.inputContent == "") {
                        this.$toast({
                            message: "开始日期不能为空哦"
                        })
                    } else if(this.inputContent != "") {
                        this.checkEndDate(this.inputContent)
                    }
                } else if (this.infons == "fromEndTime") {
                    if (this.inputContent == "") {
                        this.$toast({
                            message: "结束日期不能为空哦"
                        })
                    } else if(this.inputContent != "") {
                        this.checkEndDate(this.inputContent)
                    }
                }
            }
          }
      },
    formatter(type, value) {
        if (type === 'year') {
            return `${value}年`;
        } else if (type === 'month') {
            return `${value}月`
        } else if (type === 'day') {
            return `${value}日`
        }
        return value;
    },
     // 编辑日期
     editDate() {
        this.showTimePicker = true
     },
     //取消日期选择
     cancelDate() {
        this.showTimePicker = false
     },
     // 编辑日期
     confirmDate(val) {
         this.showTimePicker = false
         let timeStamp = new Date(val).getTime()
         let date = new Date(timeStamp);
         let Y = date.getFullYear() + '-';
         let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
         let D = date.getDate()<10? '0'+date.getDate()+ ' ':date.getDate()+ ' ';
         this.inputContent= Y+M+D
         this.showTimePicker = false
     },
     // 当前日期
     getNowFormatDate(){
        var day = new Date();

        var Year = 0;
        var Month = 0;
        var Day = 0;
        var CurrentDate = "";
        //初始化时间   
        Year       = day.getFullYear();
        Month      = day.getMonth()+1;
        Day        = day.getDate();
        
        CurrentDate += Year + "-";
        if (Month >= 10 ){
            CurrentDate += Month + "-";
        }
        else{
            CurrentDate += "0" + Month + "-";
        }
        if (Day >= 10 ){
            CurrentDate += Day ;
        }
        else{
            CurrentDate += "0" + Day ;
        }
        return CurrentDate;
    },
     // 当前日期比较
     checkEndDate( edate ) {
        
        var today = this.getNowFormatDate(); 
        var startDate = new Date(today.replace("-","/").replace("-","/")).getTime() ;
        var endDate = new Date(edate.replace("-","/").replace("-","/")).getTime() ;   
        if( startDate >= endDate ) {
            // 正确
            if (this.fromW == "fromN") {
                if (this.infons == "fromStartTime"){
                    this.workHistorys.beginDate = this.inputContent
                    this.addResume()
                } else if (this.infons == "fromEndTime") {
                    this.workHistorys.endDate = this.inputContent
                    this.addResume()
                }
            } else if ( this.fromW == "fromO") {
                if (this.infons == "fromStartTime"){
                   this.addResume()
                } else if (this.infons == "fromEndTime") {
                    this.addResume()
                }
            }
        } else if( startDate < endDate ) {
            // 日期不正确
            if (this.fromW == "fromN") {
                if (this.infons == "fromStartTime"){
                   this.$toast('开始日期无法大于当期日期')
                } else if (this.infons == "fromEndTime") {
                    this.$toast('结束日期无法大于当期日期')
                }
            } else if ( this.fromW == "fromO") {
                if (this.infons == "fromStartTime"){
                   this.$toast('开始日期无法大于当期日期')
                } else if (this.infons == "fromEndTime") {
                    this.$toast('结束日期无法大于当期日期')
                }
            }
        }
    },
    //  过滤 时间 旧简历 时间
      onlyDate(dateTime) {
        let data = dateTime.replace('00:00:00.0','')
        return data
    },
    // 添加简历 
    addResume() {
         if (this.fromW == "fromN") {
             if (this.infons == "fromName") {
                 this.workHistorys.companyName = this.inputContent
                 this.workHistorys.beginDate = this.newExperience.beginDate
                 this.workHistorys.endDate = this.newExperience.endDate
             } else if (this.infons == "fromStartTime") {
                 this.workHistorys.companyName = this.newExperience.companyName
                 this.workHistorys.beginDate = this.inputContent
                 this.workHistorys.endDate = this.newExperience.endDate
             } else if (this.infons == "fromEndTime") {
                 this.workHistorys.companyName = this.newExperience.companyName
                 this.workHistorys.beginDate = this.newExperience.beginDate
                 this.workHistorys.endDate = this.inputContent
             }
             this.setNewExperience(this.workHistorys)
             this.$router.push('/performance/newExperiences')
         } else if ( this.fromW == "fromO") {
             if (this.infons == "fromName") {
                 this.workHistorys.companyName = this.inputContent
                 this.workHistorys.beginDate = this.oldExperience.beginDate
                 this.workHistorys.endDate = this.oldExperience.endDate
                 this.workHistorys.number = this.oldExperience.number
                 this.workHistorys.uid = this.oldExperience.uid
             } else if (this.infons == "fromStartTime") {
                 this.workHistorys.companyName = this.oldExperience.companyName
                 this.workHistorys.beginDate = this.inputContent
                 this.workHistorys.endDate = this.oldExperience.endDate
                 this.workHistorys.number = this.oldExperience.number
                 this.workHistorys.uid = this.oldExperience.uid
             } else if (this.infons == "fromEndTime") {
                 this.workHistorys.companyName = this.oldExperience.companyName
                 this.workHistorys.beginDate = this.oldExperience.beginDate
                 this.workHistorys.endDate = this.inputContent
                 this.workHistorys.number = this.oldExperience.number
                 this.workHistorys.uid = this.oldExperience.uid
             }
             this.setOldExperience(this.workHistorys)
             console.log(this.oldExperience)
             this.$router.push('/performance/myExperiences')
         }
    },
    ...mapMutations(["setNewExperience", "setOldExperience"])
  }
};
</script>
<style>
</style>

<style lang="scss" scoped>
#region-year {
    position: absolute;
    width: 100%;
    height: 100%;
    .tages-content{
        position: relative;
        width: 100%;
        height: 100%;
        background: #F9F9F9;
        .top-bg{
            width: 100%;
            background: #fff;
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
            .header {
                background: #5E8EFE;
                color: #ffffff;
                height: 0.92rem;
                line-height: 0.92rem;
                box-sizing: border-box;
                padding: 0 3%;
                display: flex;
                div{
                    display: inline-block;
                    vertical-align: top;
                }
                .left{
                    width: auto;
                    margin-top: 0.15rem;
                    img{
                        width: 0.40rem;
                        height: 0.40rem;
                    }
                }
                .title {
                    color: #ffffff;
                    font-size: 0.35rem;
                    text-align: center;
                    flex: 1;
                    }
                .right{
                    font-size: 0.32rem;
                    height: 0.92rem;
                    line-height: 0.92rem;
                    width: auto;
                }
            }
        }
        .reset-wrapper{
            position: fixed;
            width: 100%;
            top: 0.92rem;
            left: 0;
            right: 0;
            overflow-y: scroll;
            bottom: 0rem;
            .reset-content{
                width: 100%;
                padding: 0.24rem;
                box-sizing: border-box;
                border-radius: 0.1rem;
                .area-input{
                    box-sizing: border-box;
                    padding: 0.36rem;
                    width: 100%;
                    border-radius: 0.1rem;
                    input{
                      width: 100%;
                      border: none;
                      font-size: 0.3rem;
                      font-family: PingFangSC-Regular;
                      font-weight: 400;
                      color: #282828;
                    }
                }
            }
    }
}

}
</style>
